export const addProgressBarComponent = (editor) => {
    const { Components } = editor;

    Components.addType('progress-bar', {
        model: {
            defaults: {
                tagName: 'div',
                attributes: { class: 'progress-bar-container','data-gjs-type':"progress-bar" },
                resizable: true, // 允许调整大小
                components: [
                    {
                        type: 'text',
                        content: '进度条',
                        attributes: { class: 'progress-bar-title' },
                    },
                    {
                        type: 'div',
                        attributes: { class: 'progress-bar-wrapper' },
                        components: [
                            {
                                type: 'div',
                                attributes: { class: 'progress-bar' },
                            },
                        ]
                    },
                    {
                        type: 'div',
                        attributes: { class: 'progress-bar-controls' },
                        components: [
                            {
                                type: 'button',
                                content: '-',
                                attributes: { class: 'progress-bar-button decrement' },
                            },
                            {
                                type: 'span',
                                content: '50%', 
                                attributes: { class: 'progress-bar-text' },
                            },
                            {
                                type: 'button',
                                content: '+',
                                attributes: { class: 'progress-bar-button increment' },
                            }
                        ]
                    }
                ],
                script() {
                    const container = this;
                    const progressBar = container.querySelector('.progress-bar');
                    const progressText = container.querySelector('.progress-bar-text');
                    let progress = 50; 

                    const updateProgress = (newProgress) => {
                        progress = Math.max(0, Math.min(100, newProgress)); 
                        progressBar.style.width = progress+'%';
                        progressText.innerText = progress+'%';
                    };

                    container.querySelector('.increment').addEventListener('click', () => {
                        updateProgress(progress + 10); 
                    });

                    container.querySelector('.decrement').addEventListener('click', () => {
                        updateProgress(progress - 10); 
                    });

                    
                    updateProgress(progress);
                },
                styles: `
                    .progress-bar-container {
                        padding: 20px;
                        border: 1px solid #ddd;
                        background-color: #f9f9f9;
                        border-radius: 8px;
                        width: 80%;
                        min-width:300px;
                        min-height:200px;
                        margin: 0 auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
                    .progress-bar-title {
                        font-size: 24px;
                        margin-bottom: 20px;
                        text-align: center;
                        font-weight: bold;
                    }
                    .progress-bar-wrapper {
                        width: 100%;
                        background-color: #e9e9e9;
                        border-radius: 5px;
                        overflow: hidden;
                        margin-bottom: 20px;
                        height: 30px;
                        display: flex;
                        align-items: center;
                    }
                    .progress-bar {
                        height: 100%;
                        background-color: #007bff;
                        transition: width 0.3s;
                        width: 50%; 
                    }
                    .progress-bar-controls {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                    }
                    .progress-bar-button {
                        padding: 10px;
                        border: none;
                        background-color: #007bff;
                        color: #fff;
                        cursor: pointer;
                        border-radius: 5px;
                        transition: background-color 0.3s;
                    }
                    .progress-bar-button:hover {
                        background-color: #0056b3;
                    }
                    .progress-bar-text {
                        font-size: 18px;
                        min-width: 50px;
                        text-align: center;
                    }
                `,
            }
        }
    });

    editor.BlockManager.add('progress-bar', {
        label: '进度条组件',
        category: '组件类',
        media:`<svg t="1720769399656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33761" width="30" height="30"><path d="M807.822222 585.955556H204.8c-51.2 0-91.022222-39.822222-91.022222-91.022223 0-51.2 39.822222-91.022222 91.022222-91.022222h608.711111c51.2 0 91.022222 39.822222 91.022222 91.022222-5.688889 51.2-45.511111 91.022222-96.711111 91.022223zM204.8 420.977778c-45.511111 0-79.644444 34.133333-79.644444 73.955555 0 45.511111 34.133333 79.644444 79.644444 79.644445h608.711111c45.511111 0 79.644444-34.133333 79.644445-79.644445 0-45.511111-34.133333-79.644444-79.644445-79.644444-5.688889 5.688889-608.711111 5.688889-608.711111 5.688889z" p-id="33762"></path><path d="M506.311111 432.355556H204.8c-11.377778 0-22.755556 5.688889-28.444444 5.688888-17.066667 17.066667-34.133333 34.133333-34.133334 56.888889 0 34.133333 22.755556 56.888889 56.888889 62.577778h301.511111c11.377778 0 22.755556-5.688889 34.133334-11.377778 17.066667-11.377778 34.133333-34.133333 34.133333-56.888889-5.688889-22.755556-28.444444-51.2-62.577778-56.888888z" p-id="33763"></path></svg>`,
        content: { type: 'progress-bar' },
    });
};
